<template>
  <div>
    <van-nav-bar fixed title="贡献值明细" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top pos-r">
      <div class="head-bg-box bg-primary pos-a">
        <img class="pos-a bottom-0 right-0" :src="bgImg">
      </div>
      <div class="page-content-box pos-r">
        <datetime-filter
          :time-start-select="timeStartSelect"
          :time-end-select="timeEndSelect"
          @openDatetimeSelect="openDatetimeSelect"
          @onStartConfirm="onStartConfirm"
          @onEndConfirm="onEndConfirm"
          @close="close"
          @getData="getData"
        />
        <div class="flex-s-c plr-25 mt-60 mlr-25">
          <div class="flex flex-d-c color-white flex-1">
            <span class="fs-28">收钱笔数</span>
            <span class="fs-64 fw-600">362</span>
          </div>
          <div class="flex flex-d-c color-white flex-1">
            <span class="fs-28">收钱金额</span>
            <span class="fs-64 fw-600">9942.00</span>
          </div>
        </div>
      </div>
      <div class="contain pos-a bg-white full-width">
        <div class="mlr-25">
          <content-search placeholder="请输入会员号/姓名/手机" theme="1" @search="search" />
        </div>
        <record-list :list="recordList" img-size="74" type="cash" @openDetail="openDetail" />
      </div>
    </div>
  </div>
</template>

<script>
import contentSearch from 'components/contentSearch'
import recordList from 'components/recordList'
import datetimeFilter from 'components/datetimeFilter'
import bgImg from 'assets/images/cashList.png'
import { GetCashierPage } from 'api/order'
export default {
  components: {
    contentSearch,
    recordList,
    datetimeFilter
  },
  data() {
    return {
      bgImg,

      // 时间选择框显示
      timeStartSelect: false,
      timeEndSelect: false,

      // 时间筛选
      datetime: {},

      requestData: {
        pageIndex: 1,
        pageSize: 10
      },

      // 记录列表
      recordList: [
        {
          url: '',
          HeadPortrait:
            'https://iknow-pic.cdn.bcebos.com/a8773912b31bb051d1fd5754267adab44bede0f5?x-bce-process=image/resize,m_lfit,w_600,h_800,limit_1',
          RealName: '张三',
          PayTime: '2020-03-19  16:33:59',
          PriceSum: '3.44',
          state: 0,
          Id: 123
        }
      ]
    }
  },
  created() {
    this.GetCashierPage()
  },
  methods: {
    search(value) {
      this.requestData.searchKey = value
      this.GetCashierPage()
    },
    onSubmit(values) {
      console.log('submit', values)
    },
    openDatetimeSelect() {
      this.timeStartSelect = true
    },
    onStartConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = true
    },
    onEndConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },
    close() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },
    getData(value) {
      console.log(value)
      // 获取到了时间区间，需要加入到筛选参数中去
      this.GetCashierPage()
    },
    GetCashierPage() {
      GetCashierPage(this.requestData).then(res => {
        if (res) {
          // this.recordList = res.Data
          console.log(res.Data)
        }
      })
    },
    openDetail(value) {
      console.log(value)
      this.$router.push('/storeManage/cashDetail/' + value)
    }
  }
}
</script>
<style lang="scss" scoped>
.head-bg-box {
  height: 419px;
  border-radius: 0;
  img {
    width: 280px;
    height: 220px;
  }
}
.contain {
  top: 501px;
  border-radius: 24px 24px 0 0;
}
</style>
